import React from 'react';
import { connect } from 'dva';
import { Button, Table, Form, Input, Popconfirm, Select,Menu, Dropdown, Icon,  } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;
import { getItem, inArray } from '../../utils/utils';
const permissionList = localStorage.getItem("permissions") ? JSON.parse(localStorage.getItem("permissions")) : {};
const data = permissionList.map(d => d);
import SpaceModal from '../../components/space/SpaceModal';


function Space({ dispatch, space, loading, form }) {

  const {current,currentSize,total,presetId,list,contractList,modalVisible,detailList,currentItem,roomList,searchObject,} = space

  const columns = [{
    title: '机柜',
    dataIndex: 'assetName',
    key: 'assetName',
    width: 120,
  },{
    title: '机房',
    dataIndex: 'roomName',
    key: 'roomName',
    width: 120,
  },{
    title: '总U数',
    dataIndex: 'uHeight',
    key: 'uHeight',
    width: 100,
  },{
    title: '已用',
    dataIndex: 'usedNums',
    key: 'usedNums',
    width: 100,
  },{
    title: '未用',
    dataIndex: 'restNums',
    key: 'restNums',
    width: 60,
  }];

  const formItemLayout = {
      labelCol: { span: 5 },
      wrapperCol: { span: 10 },
  };

  const onConfirmInstock = (id) => {
    dispatch({
        type: 'space/onConfirmInstock',
        payload:id,
    })
  }

  function handleClear(){
    form.resetFields();
  }



  const addHandler = () => {
    dispatch({
      type: 'space/updateState',
      payload: {modalVisible: true,},
    })
  }

  const modalProps = {
        visible: modalVisible,
        dispatch:dispatch,
        roomList:space.roomList,
        maskClosable: false,
        confirmLoading: loading,
        wrapClassName: 'vertical-center-modal',
        modalCurrent: space.modalCurrent,
        modalCurrentSize: space.modalCurrentSize,
        modalTotal:space.modalTotal,
        modalList:space.modalList,
        modalLoading:space.modalLoading,
        onCancel () {
          dispatch({
              type: 'space/updateState',
              payload:{modalVisible:false,modalList:[],},
          })
        },
  }

    const pagination = {
      current:space.current,
      pageSize:space.currentSize,
      total: space.total,
      showSizeChanger: true,
      showTotal: (total => '共' + space.total + '条'),
      onShowSizeChange(current, size) {
        dispatch({
          type: 'space/queryList',
          payload: { ...getFieldsValue(),...{'pageNum':current, 'pageSize':size} },
        });
      },
      onChange(current) {
        dispatch({
          type: 'space/queryList',
          payload: { ...getFieldsValue(),...{'pageNum':current, 'pageSize':space.currentSize} },
        });
      },
    };

  const submitHandle = () => {
      dispatch({
          type: 'space/queryList',
          payload: { ...getFieldsValue() },
      });
    }

    let roomsList = [];
    for (let i = 0; i < space.roomList.length; i++) {
      roomsList.push(<Option key={space.roomList[i].id_}>{space.roomList[i].name}</Option>);
    }

    const { getFieldDecorator, getFieldsValue, getFieldValue } = form;
      return (
        <div style={{backgroundColor:'#fff'}}>
          <div style={{minHeight:'100%'}}>
              <div style={{width:'100%',backgroundColor:'#fff',lineHeight:'40px',paddingLeft:'20px',paddingTop:'10px'}}>
                  <Form layout="inline" >
                        <FormItem>
                          {
                            getFieldDecorator('roomId')(
                             <Select
                                  showSearch
                                  style={{ width: 200 }}
                                  placeholder="选择机房"
                                  optionFilterProp="children"
                              >
                                 <Option value="">全部</Option>
                                  {roomsList}
                              </Select>
                            )
                         }
                        </FormItem>
                        <FormItem>
                          <Button type="primary" size='large' onClick={submitHandle} className='ant-search-btn'>查询</Button>
                        </FormItem>
                        <FormItem>
                          <Button size="large" htmlType="reset" onClick={handleClear}>清空</Button>
                        </FormItem>

                        <div style={{marginTop:'-40px',textAlign:'right'}}>
                          <FormItem>
                            <Button size="large" style={{ marginRight: '10px' }} type="primary" onClick={addHandler}>U位推荐</Button>
                          </FormItem>
                        </div>
                  </Form>
              </div>

              <div style={{width:'100%',padding:"30px 20px",}}>
                  <Table columns={columns} rowKey={record => record.rackId_} loading={loading} dataSource={space.list} pagination={pagination}
                  />
              </div>
        </div>
          <SpaceModal {...modalProps} />
      </div>
    );
  }

function mapStateToProps(state) {
  return { space : state.space,loading:state.loading.models.space};
}

Space = Form.create()(Space);


export default connect(mapStateToProps)(Space);
